<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins" class="table-view">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form"> </XForm>
      </template>
      <template #toolbar_btns>
        <VButton type="primary" @click="add" v-hasPermi="[reportAuthList.royaltiesRepor.add]">
          <div class="dk-iconfont icon-Plus"></div>
          新增</VButton
        >
        <VButton @click="handleStatus(1)" v-hasPermi="[reportAuthList.royaltiesRepor.enable]">
          <div class="dk-iconfont icon-CircleCheck text-[#3487FF]"></div>
          启用
        </VButton>
        <VButton @click="handleStatus(0)" v-hasPermi="[reportAuthList.royaltiesRepor.disable]">
          <div class="dk-iconfont icon-Disabled text-[red]"></div>
          禁用
        </VButton>
        <span class="ml-auto" />
        <VButton @click="openSettingExport" v-hasPermi="[reportAuthList.royaltiesRepor.export]">
          <div class="dk-iconfont icon-Upload"></div>
          导出提成报表
        </VButton>
      </template>
    </VTable>
    <VLog ref="logRef" :api="oplog"></VLog>
    <Vedit ref="edit" :title="editTitle" class="dialogPublic" :formula="formula" :vat_type="vat_type" @confirm="editConfirm"> </Vedit>
    <settingExport ref="settingExportRef" />

    <el-dialog v-model="dialogVisible" title="开发人员" width="500" :before-close="handleClose">
      <span>{{ developersValue?.join() }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </VPage>
</template>

<script setup lang="jsx" name="basic-setupSales-VAT">
import { overallOptions } from "@/api/public"
import { oplog, settingStatus, deleteSetting } from "./api"
import { commissionSettingList, commissionSettingSwitchState, commissionSettingDelete } from "./api"
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import { reportAuthList } from "@/Auth/report.js"
import XForm from "@/components/XForm/index.vue"

import VLog from "@/components/VLog"
import Vedit from "./components/edit"
import settingExport from "./components/settingExport"
const edit = ref()
const data = reactive({
  editTitle: "新增",
  statusOption: [],
  vat_type: [],
  formula: [],
})

const developersValue = ref([])
const openDevelopers = (row) => {
  developersValue.value = row.developers
  dialogVisible.value = true
}

const dialogVisible = ref(false)

const handleClose = () => {
  developersValue.value = []
  dialogVisible.value = false
}

const openSettingExport = () => {
  const arr = getSelectRow()
  if (!arr.length) {
    return false
  }
  settingExportRef?.value?.open({ id: arr })
}
const { editTitle, statusOption, vat_type, formula } = toRefs(data)
const tableRef = ref()
const logRef = ref()
const settingExportRef = ref()

const formOption = ref({
  inline: true,
})
const fieldList = ref([
  {
    field: "template_name",
    placeholder: "模板名称",
    style: { width: "200px" },
  },

  {
    field: "state",
    type: "select",
    options: {
      placeholder: "状态",
      data: [
        { label: "启用", value: "1" },
        { label: "禁用", value: "0" },
      ],
    },
    style: { width: "120px" },
  },
  {
    field: "developer",
    type: "cascader",
    itemProps: { placeholder: "开发人员" },
    style: { width: "200px" },
  },
])

//编辑
const ruleEdit = (row) => {
  editTitle.value = "编辑"
  edit.value.open(row)
}
//新增
const add = () => {
  editTitle.value = "新增"
  edit.value.open()
}
const editConfirm = () => {
  query()
}
//删除
const profitSettingDeleteF = (id) => {
  ElMessageBox.confirm("此操作将永久删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "oms-message-confirm-button",
  }).then(async () => {
    try {
      commissionSettingDelete({ ids: [id] }).then((res) => {
        ElMessage.success("删除成功")
        query()
      })
    } catch (e) {
      throw Error(e)
    }
  })
}
//启用
const handleStatus = (state) => {
  const arr = getSelectRow()
  if (!arr.length) {
    return false
  }
  commissionSettingSwitchState({ ids: arr, state }).then((res) => {
    ElMessage({ message: "操作成功", type: "success" })
    query()
  })
}

// 查询
const query = () => {
  tableRef?.value.query()
}
//获取下拉数据
onMounted(() => {})
//获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  const arr = []
  getCheckboxRecords.map((e) => {
    arr.push(e.id)
  })
  return arr
}

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  // showOverflow: true,
  columns: [
    { type: "checkbox", width: 60 },
    { field: "template_name", title: "模板名称", width: 150 },
    {
      title: "状态",
      field: "state",
      width: 100,
      slots: {
        default: ({ row }) => <VStatus value={!!row.state} />,
      },
    },

    {
      field: "developer",
      title: "开发人员",
      minWidth: 150,
      slots: {
        default: ({ row }) => (
          // <div class="w-[90%] ">{row.developers?.join()}</div>,

          // <VText value={row.developers?.join()} line={1} />
          <div class="block flex">
            <div class="developers flex-1">{row.developers?.join()}</div>

            {row.developers.length > 5 ? (
              <div class="text-[var(--el-color-primary)] cursor-pointer" onClick={() => openDevelopers(row)}>
                更多
              </div>
            ) : (
              ""
            )}
          </div>
        ),
      },
    },
    {
      field: "is_show_platform",
      title: "是否展示平台",
      width: 120,
      slots: {
        default: ({ row }) => <VText value={row.is_show_platform == 1 ? "展示" : "不展示"} line={1} />,
      },
    },
    {
      field: "is_show_category",
      title: "是否展示品类",
      width: 120,
      slots: {
        default: ({ row }) => <VText value={row.is_show_category == 1 ? "展示" : "不展示"} line={1} />,
      },
    },
    {
      field: "platform_id_desc",
      title: "新品时间范围",
      width: 120,
      slots: {
        default: ({ row }) => (
          <div>
            {row.new_product_start}-{row.new_product_end}
          </div>
        ),
      },
    },
    {
      title: "老品时间范围",
      width: 120,
      slots: {
        default: ({ row }) => (
          <div>
            {row.old_product_start}-{row.old_product_end}
          </div>
        ),
      },
    },
    {
      title: "操作",
      width: 150,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link type="primary" onClick={() => ruleEdit(row)} v-hasPermi={[[reportAuthList.royaltiesRepor.edit]]}>
                编辑
              </el-button>
              <el-button link type="primary" onClick={() => logRef?.value.open({ id: row.id })} v-hasPermi={[[reportAuthList.royaltiesRepor.log]]}>
                日志
              </el-button>
              <el-button link type="danger" onClick={() => profitSettingDeleteF(row.id)} v-hasPermi={[[reportAuthList.royaltiesRepor.delete]]}>
                删除
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => commissionSettingList({ ...form, ...page }),
    },
  },
})
</script>
<style lang="scss" scoped>
.table-view {
  :deep(.fixed-right--wrapper) {
    margin-top: -1px !important;
  }
  :deep(.fixed-left--wrapper) {
    margin-top: -1px !important;
  }
}
:deep(.developers) {
  // width: 90%;
  // width: 50px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;

  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // word-break: break-all;
}
</style>
